<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/WEB-INF/webpage/common/taglibs.jspf"%>
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <meta name="keywords" content="<spring:message code="sys.site.keywords" arguments="${platformName}"/>">
    <meta name="description" content="<spring:message code="sys.site.description" arguments="${platformName}"/>">

    <html:css  name="favicon,bootstrap,font-awesome,animate"/>
    <link href="${staticPath}/common/css/style.css" rel="stylesheet">
    <style type="text/css">
        body,table{
            font-size:12px;
        }
        table{
            table-layout:fixed;
            empty-cells:show;
            border-collapse: collapse;
            margin:0 auto;
            overflow-y: scroll;
            height: 300px;
        }
        td{
            height:30px;
        }
        h1,h2,h3{
            font-size:12px;
            margin:0;
            padding:0;
        }
        .table{
            border:1px solid #cad9ea;
            color:#666;
        }
        .table th {
            background-repeat:repeat-x;
            height:30px;
        }
        .table td,.table th{
            border:1px solid #cad9ea;
            padding:0 1em 0;
        }
        .table tr.alter{
            background-color:#f5fafe;
        }
    </style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row ibox float-e-margins">
        <div class="ibox-title">
            <h5>设备信息(<font id="second">30</font>)</h5>
            <div class="ibox-tools">
                <a class="collapse-link"> <i class="fa fa-chevron-up"></i>
                </a>
                <a class="close-link"> <i class="fa fa-times"></i>
                </a>
            </div>
        </div>
        <div id="echartsMain" class="col-sm-12 border-bottom white-bg dashboard-header ibox-content" style="height: 450px;width: 100%">
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 border-bottom white-bg dashboard-header">
                <blockquote class="text-warning" style="font-size:16px">冷链操作平台是针对于百洋集团冷链运输业务的操作管理系统
                    <br/><br/>基础资料-管理采集设备、保温箱、冷藏车
                    <br/>装车单管理-管理装车单装箱关联、装车确认、签收确认等功能
                    <br/>查询作业-提供采集设备信息、温度预警、装车单信息、设备指令的查询功能
                    <br/>系统设置-提供常见的系统功能设置模块，如人员、权限等
                    <br/>常见工具-提供计划作业功能
                </blockquote>
        </div>
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>更新日志</h5>
                </div>
                <div class="ibox-content no-padding">
                    <div class="panel-body">
                        <c:forEach items="${relHistories}" var="relHistory">
                        <div class="panel-group" id="version">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h5 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#version"
                                           href="#${relHistory.id}">${relHistory.header}</a><code
                                            class="pull-right"><fmt:formatDate value="${relHistory.createDate}" pattern="yyyy.MM.dd" /> </code>
                                    </h5>
                                </div>
                                <div id="${relHistory.id}" class="panel-collapse collapse in">
                                    <div class="panel-body">
                                        <ol>
                                            <li>${relHistory.content}</li>
                                        </ol>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </c:forEach>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 全局js -->
<html:js  name="jquery,bootstrap"/>

<!-- 自定义js -->
<script src="${staticPath}/common/js/content.js"></script>
<script src="${staticPath}/vendors/echarts/echarts.min.js"></script>

<script type="text/javascript">

    let dom = document.getElementById("echartsMain");
    let myChart = echarts.init(dom);
    let option;
    let dataNotRelation = [[]];
    let dataRelation = [[]];
    let dataActive = [[]];
    let x = [];
    let second = 30;

    $(function () {
        option = {
            backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [
                {
                    offset: 0,
                    color: '#d9d6c3'
                },
                {
                    offset: 1,
                    color: '#f2eada'
                }
            ]),
            legend: {
                right: '10%',
                top: '3%',
                data: ['未关联', '已关联', '已激活']
            },
            grid: {
                left: '8%',
                top: '10%',
                bottom: "23%"
            },
            toolbox: {
                show: true,
                right: '5%',
                lang: ['数据视图', '关闭', '刷新'],
                feature: {
                    dataView: {
                        readonly: true,
                        optionToContent: function (opt) {
                            let series = opt.series;
                            let legend = opt.legend;
                            let clz = '';
                            let content = '<table  width="90%" class="table">' +
                                '<tr><th>设备</th>' +
                                '<th >温度</th>' +
                                '<th>电量</th>' +
                                '<th>时间</th>' +
                                '<th>状态</th></tr>';
                            for(let i = series.length - 1; i >= 0; i--) {
                                for(let j = 0; j < series[i].data.length; j++) {
                                    clz = (j % 2) == 1 ? 'alter' : '';
                                    content = content + '<tr class="' + clz  + '"><td>' + series[i].data[j][0] + '</td>' +
                                        '<td>' + series[i].data[j][1] + '</td>' +
                                        '<td>' + series[i].data[j][2] + '</td>' +
                                        '<td>' + series[i].data[j][3] + '</td>' +
                                        '<td>' + legend[0].data[i] + '</td>' +
                                        "</tr>";
                                }
                            }
                            content = content + "</table>";
                            return content;
                        }
                    },
                },
            },
            xAxis: {
                type: 'category',
                data: x,
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                },
                axisLabel: {
                    interval: 0,
                    formatter: function (value) {
                        return value.split("").join("\n");
                    }
                }
            },
            yAxis: {
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                },
                scale: true
            },
            series: [
                {
                    name: '未关联',
                    data: dataNotRelation,
                    type: 'scatter',
                    symbolSize: function (data) {
                        return Math.sqrt(data[2]) + 2;
                    },
                    markLine : {
                        lineStyle: {
                            color: '#00FFFF'
                        },
                        data: [
                            {name: '温度上限', yAxis: 8},
                            {name: '温度下限', yAxis: 2},
                        ]
                    },
                    emphasis: {
                        focus: 'series',
                        label: {
                            show: true,
                            formatter: function (param) {
                                return param.data[0] + ' ' + param.data[1] + "℃";
                            },
                            position: 'top'
                        }
                    },
                    itemStyle: {
                        shadowBlur: 200,
                        shadowColor: 'rgba(255, 230, 0, 0.5)',
                        shadowOffsetY: 5,
                        color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                            {
                                offset: 0,
                                color: 'rgb(119, 120, 123)'
                            },
                            {
                                offset: 1,
                                color: 'rgb(79, 85, 86)'
                            }
                        ])
                    }
                },
                {
                    name: '已关联',
                    data: dataRelation,
                    type: 'scatter',
                    symbolSize: function (data) {
                        return Math.sqrt(data[2]) + 2;
                    },
                    markLine : {
                        lineStyle: {
                            color: '#00FFFF'
                        },
                        data: [
                            {name: '温度上限', yAxis: 8},
                            {name: '温度下限', yAxis: 2},
                        ]
                    },
                    emphasis: {
                        focus: 'series',
                        label: {
                            show: true,
                            formatter: function (param) {
                                return param.data[0] + ' ' + param.data[1] + "℃";
                            },
                            position: 'top'
                        }
                    },
                    itemStyle: {
                        shadowBlur: 200,
                        shadowColor: 'rgba(25, 100, 150, 0.5)',
                        shadowOffsetY: 5,
                        color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                            {
                                offset: 0,
                                color: 'rgb(129, 227, 238)'
                            },
                            {
                                offset: 1,
                                color: 'rgb(25, 183, 207)'
                            }
                        ])
                    }
                },{
                    name: '已激活',
                    data: dataActive,
                    type: 'scatter',
                    symbolSize: function (data) {
                        return Math.sqrt(data[2]) + 2;
                    },
                    markLine : {
                        lineStyle: {
                            color: '#00FFFF'
                        },
                        data: [
                            {name: '温度上限', yAxis: 8},
                            {name: '温度下限', yAxis: 2},
                        ]
                    },
                    emphasis: {
                        focus: 'series',
                        label: {
                            show: true,
                            formatter: function (param) {
                                return param.data[0] + ' ' + param.data[1] + "℃";
                            },
                            position: 'top'
                        }
                    },
                    itemStyle: {
                        shadowBlur: 200,
                        shadowColor: 'rgba(120, 36, 50, 0.5)',
                        shadowOffsetY: 5,
                        color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                            {
                                offset: 0,
                                color: 'rgb(215, 19, 69)'
                            },
                            {
                                offset: 1,
                                color: 'rgb(239, 65, 54)'
                            }
                        ])
                    }
                },
            ]
        };

        if (option && typeof option === 'object') {
            myChart.setOption(option, true);
        }

        // 查询当前设备数据
        /*
        currentInfo();
        window.setInterval(function(){
            second--;
            if (second == 0) {
                second = 30
            }
            $("#second").html(second);
        }, 1000);

        window.setInterval(currentInfo, 1000 * 30)
        */
    });

    /**
     * 查询最新设备数据
     */
    function currentInfo() {
        // 查询当前设备数据
        $.ajax({
            type: "GET",
            url: "${adminPath}/cc/device/humiture/currentInfo",
            traditional: true,
            success: function (res) {
                if (res.ret == 0) {
                    x.length = 0;
                    dataNotRelation.length = 0;
                    dataRelation.length = 0;
                    dataActive.length = 0;
                    let infoList = res.data;
                    for (let i = 0; i < infoList.length; i++) {
                        x.push(infoList[i].sbNo);
                        if (infoList[i].working == '未关联') {
                            dataNotRelation.push([infoList[i].sbNo, infoList[i].temperature, infoList[i].electric, infoList[i].collectTime]);
                        }
                        else if (infoList[i].working == '已关联') {
                            dataRelation.push([infoList[i].sbNo, infoList[i].temperature, infoList[i].electric, infoList[i].collectTime]);
                        }
                        else {
                            dataActive.push([infoList[i].sbNo, infoList[i].temperature, infoList[i].electric, infoList[i].collectTime]);
                        }
                    }
                    myChart.setOption(option, true);
                }
                else {
                    top.layer.alert(res.msg, {icon: 0, title:'提示'});
                }
            }
        });
    }

</script>
</body>

</html>
